import React, { Component } from 'react';
import { Tag, Checkbox } from 'antd';

export interface TagsState {
  tag: {
    tagname: string;
  };
}
export interface TagsProps {
  tagList: {
    id: string;
    tagname: string;
  }[];
}

class Tags extends Component<TagsProps, TagsState> {
  constructor(props: TagsProps) {
    super(props);
  }

  onChange(checkedValues: any) {
    console.log(checkedValues);
  }

  render() {
    return (
      <Checkbox.Group className="tags" onChange={this.onChange.bind(this)}>
        {this.props.tagList.map(tag => (
          <Tag closable key={tag.id}>
            <Checkbox value={tag.id}>{tag.tagname}</Checkbox>
          </Tag>
        ))}
      </Checkbox.Group>
    );
  }
}

export default Tags;
